<template>
  <el-row class="logwhit">
    <!-- 登陆 -->

    <!-- 注册 -->
    <el-col :span="8" :offset="15" class="logmu">
      <div class="logone">注册</div>

      <!-- 手机号码 -->
      <div>
        <div class="useinput">
          <el-input placeholder="请输入11位手机号码" :clearable="true" v-model="ruleForm.user"></el-input>
        </div>
        <div class="useinput">
          <el-input prefix-icon="el-icon-message" placeholder="验证码" v-model="ruleForm.rules"></el-input>
          <el-button style="margin-left:8px">获取验证码</el-button>
        </div>
        <div class="useinput">
          <el-input placeholder="确认密码" show-password v-model="ruleForm.pass"></el-input>
        </div>
        <div class="useinput">
          <el-input placeholder="请输入推介号或推介人手机号（选填）" v-model="ruleForm.tur"></el-input>
        </div>
      </div>
      <div class="forgert123">
        <el-checkbox v-model="checked">我已阅读《理财1+1服务协议》</el-checkbox>
      </div>
      <div class="useinput">
        <el-button type="primary" style="width:100%">注册</el-button>
      </div>
      <div class="forgert123">
        <div class="othelogin">
          其他登陆方式:
          <el-image
            style="width: 24px; height: 24px"
            class="curpoing"
            @click="gothree"
            src="./static/igm/QQ.png"
            fit="fit"
          ></el-image>
          <el-image
            style="width: 24px; height: 24px"
            class="curpoing"
            @click="gothree"
            src="./static/igm/web.png"
            fit="fit"
          ></el-image>
          <el-image
            style="width: 24px; height: 24px"
            class="curpoing"
            @click="gothree"
            src="./static/igm/wx.png"
            fit="fit"
          ></el-image>
        </div>
        <el-link type="primary" @click="gologin" :underline="false">使用已有账户登陆</el-link>
      </div>
      <div class="useinput">
        <div class="othelogin">
          <div>帮助</div>
          <div>隐私</div>
          <div>协议</div>
        </div>
      </div>
      <div class="useinput">@2019 &nbsp &nbsp &nbsp 理财1+1系统</div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      activeName: "second",
      ruleForm: {
        user: "",
        pass: "",
        tur: "",
        rules: ""
      },
      checked: true
    };
  },
  methods: {
    gologin() {
      console.log("路由跳转");
      this.$router.push({ path: "login" });
    },
      // 第三方登陆
    gothree(){
        this.$router.push({path:"treein"})
    }
  }
};
</script>

<style scoped>
.curpoing{
  cursor: pointer;
}
.logonetw {
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  line-height: 28px;
}
.logone {
  width: 100%;
  margin: 30px 0;
  text-align: center;
  font-size: 20px;
  line-height: 28px;
}
.logwhit {
  width: 100%;
  background-color: #ffffff;
  height: 751px;
  background: url("/static/igm/登录页面.png") no-repeat;
  background-size: 100% 100%;
}
.logmu {
  margin-top: 30px;
  margin-right: 20px;
  padding-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid #797979;
}
.useinput {
  width: 80%;
  display: flex;
  justify-content: center;
  padding: 0 10%;
  margin-top: 25px;
}
.forgert123 {
  width: 80%;
  display: flex;
  padding: 0 10%;
  margin-top: 25px;
  justify-content: space-between;
}
.othelogin {
  width: 200px;
  margin-left: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.logborderbottom {
  border-bottom: 3px solid #0000ff;
  color: #0000ff;
}
.logonetw:hover {
  cursor: pointer;
}
.tell {
  display: none;
}
a {
  width: 30%;
}
</style>